<template>
	<view class="repair">
		<view class="repair-list" v-if="lists.length > 0 || loadStatus == 'loading'">
			<view class="repair-item" v-for="(item, index) in lists" :key="index" @click="$goPage('/client/repair/detail',{project: item.Pid})">
				<view class="repair-item_cell u-flex">
					<view class="u-flex-1">
						<text class="repair-item_cell--label">{{$t('project.ship_name')}}：</text>
						<text class="repair-item_cell--value">{{item.ShipName}}</text>
					</view>
					<view class="repair-item_cell--state">
						<text class="icon icon-lunchuan"></text>
						{{$t('project.prject_stats['+item.Stat + ']')}}
					</view>
				</view>
				<view class="repair-item_cell" v-if="item.StatText == '修理终止'">
					<text class="repair-item_cell--label">{{$t('project.pre_fix_date')}}：</text>
					<text class="repair-item_cell--value">{{item.PreFixDateText != '' ? item.PreFixDateText : '-'}}</text>
				</view>
				<!-- <view class="repair-item_cell" v-if="item.StatText == '开航'">
					<text class="repair-item_cell--label">{{i1n8.settle_amount}}：</text>
					<text class="repair-item_cell--value">{{item.SettleAmountText != '' ? item.SettleAmountText : '-'}}</text>
				</view> -->
				<view class="repair-item_cell" v-if="item.StatText == '开航'">
					<text class="repair-item_cell--label">{{$t('project.done_date')}}：</text>
					<text class="repair-item_cell--value">{{item.EndDateText != '' ? item.EndDateText : '-'}}</text>
				</view>
				<view class="repair-item_cell" v-if="item.StatText == '开航'">
					<text class="repair-item_cell--label">{{$t('project.fix_yard')}}：</text>
					<text v-if="lang=='zh'" class="repair-item_cell--value">{{item.ShipYard != '' ? item.ShipYard : '-'}}</text>
					<text v-else class="repair-item_cell--value">{{item.ShipYardEn != '' ? item.ShipYardEn : '-'}}</text>
				</view>
			</view>
			<u-loadmore :status="loadStatus" :icon-type="$iconType" :load-text="loadText" margin-bottom="45" margin-top="45" color="#C1C0C0" />
		</view>
		<u-empty :text="$t('project.empty_txt')" mode="list" v-else></u-empty>
	</view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				lists: [],
				loadStatus: 'loading',
				query: {
					idx: 1,
					size: 10
				},
				loadText: {
					loadmore: this.$t('project.pull_up'),  
					loading: this.$t('project.loading'),
					nomore: this.$t('project.note_no_more'),
				},
				lang:"",
			}
		},

		onLoad() {
			
			this.lang = uni.getStorageSync('lang')
			if (this.lang == '中文') {
				this.lang = 'zh'
			}else{
				this.lang = 'en'
			}
			//console.log("---lang---"+this.lang);
		},
		onShow() {
			uni.setNavigationBarTitle({
				 title:this.$t('mine.my_project')
			 })
			this.query.idx = 1;
			this.loadStatus = 'loading';
			this.getList();
		},
		components: {
			
		},
		computed: {
		},
		methods: {
      		getList() {
				if (this.loadStatus == 'nomore') {
					return;
				}
				this.query.clientType = 2;
				this.$http.get('/client/biz/project/list', this.query).then(res => {
					let { idx, size } = this.query;
					if(res){
						console.log(res)
						this.lists = idx <= 1 ? res : this.lists.concat(res);
						this.query.idx = res.length < size ? idx : idx + 1;
						this.loadStatus = res.length < size ? 'nomore' : 'loading';
					}	
				})
			},
		},
		onReachBottom() {
			console.log('到达底部了到达底部了-------------------------wwww-------------------')
			this.getList();
		},
        onPullDownRefresh() {
			this.query.idx = 1;
			this.loadStatus = 'loading';
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
        }
	}
</script>

<style lang="scss" scoped>
	.repair {
		// padding-bottom: 88rpx;
	}
	.repair-item {
		padding: 36rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		white-space: normal;
		word-break: break-all;
		&_cell {
			&+& {
				margin-top: 24rpx;
			}
			&--label {
				color: #666666;
			}
			&--value {
				color: #000000;
			}
			&--state{
				position: relative;
				right: -30rpx;
				height: 58rpx;
				line-height: 58rpx;
				padding:0 14rpx;
				font-size: 28rpx;
				color: #5E6D82;
				background-color: #ECF8FF;
				.icon{
					margin-right: 6rpx;
				}
			}
			&--state:before{
				content: '';
				position: absolute;
				left: -20rpx;
				top: 0;
				width:0;
				height:0;
				border-top:29rpx solid transparent;
				border-bottom:29rpx solid transparent;
				border-right:29rpx solid  #ECF8FF;

			}
		}
	}
</style>
